<template>
	<el-dialog title="添加仓管员" v-model="state.dialog.isShowDialog" width="30%">
		<div style="display: flex; flex-direction: column; align-items: center; justify-content: center">
			<div style="margin: 10px">请打开小程序，扫描二维码添加仓管员</div>
			<div ref="qrcodecontainer" id="qrcode"></div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue';
import { useUserInfo } from '/@/stores/userInfo';
import QRCode from 'qrcodejs2-fixes';
import { storeToRefs } from 'pinia';
const userStore = useUserInfo();
const { userInfo } = storeToRefs(userStore);
const state = reactive({
	dialog: {
		isShowDialog: false,
	},
});
const qrcodecontainer = ref();
const openDialog = () => {
	state.dialog.isShowDialog = true;
	nextTick(() => {
		document.getElementById('qrcode')!.innerHTML = '';
		new QRCode(
			// qrcodecontainer.value
			document.getElementById('qrcode'),
			{
				text: userInfo.value?.companyId!.toString(),
				width: 200,
				height: 200,
				colorDark: '#000000',
				colorLight: '#ffffff',
				correctLevel: QRCode.CorrectLevel.H,
			}
		);
	});
};
defineExpose({
	openDialog,
});
</script>
